import React, { useEffect, useRef } from 'react';
import { Card, Table, Typography, Row, Col } from 'antd';
import * as echarts from 'echarts';

const { Title, Text } = Typography;

// 模拟数据
const mockData = [
  { category_id: 1, category_name: '电子产品', cart_cnt: 1200, click_cnt: 5600, favorite_cnt: 890, purchase_cnt: 450, total_interactions: 8140 },
  { category_id: 2, category_name: '服装鞋帽', cart_cnt: 2300, click_cnt: 8900, favorite_cnt: 1230, purchase_cnt: 890, total_interactions: 13320 },
  { category_id: 3, category_name: '家居用品', cart_cnt: 980, click_cnt: 4500, favorite_cnt: 670, purchase_cnt: 340, total_interactions: 6490 },
  { category_id: 4, category_name: '食品饮料', cart_cnt: 3400, click_cnt: 12300, favorite_cnt: 450, purchase_cnt: 1200, total_interactions: 17350 },
  { category_id: 5, category_name: '美妆个护', cart_cnt: 1800, click_cnt: 6700, favorite_cnt: 980, purchase_cnt: 560, total_interactions: 10040 },
  { category_id: 6, category_name: '运动户外', cart_cnt: 780, click_cnt: 3400, favorite_cnt: 560, purchase_cnt: 230, total_interactions: 4970 },
];

const columns = [
  {
    title: '分类ID',
    dataIndex: 'category_id',
    key: 'category_id',
  },
  {
    title: '分类名称',
    dataIndex: 'category_name',
    key: 'category_name',
  },
  {
    title: '加入购物车次数',
    dataIndex: 'cart_cnt',
    key: 'cart_cnt',
  },
  {
    title: '点击次数',
    dataIndex: 'click_cnt',
    key: 'click_cnt',
  },
  {
    title: '收藏次数',
    dataIndex: 'favorite_cnt',
    key: 'favorite_cnt',
  },
  {
    title: '购买次数',
    dataIndex: 'purchase_cnt',
    key: 'purchase_cnt',
  },
  {
    title: '总互动次数',
    dataIndex: 'total_interactions',
    key: 'total_interactions',
  },
];

const CategoryInteraction = () => {
  const barChartRef = useRef(null);
  const radarChartRef = useRef(null);
  const barChartInstance = useRef(null);
  const radarChartInstance = useRef(null);

  useEffect(() => {
    // 初始化柱状图
    if (barChartRef.current && !barChartInstance.current) {
      barChartInstance.current = echarts.init(barChartRef.current);
    }

    // 初始化雷达图
    if (radarChartRef.current && !radarChartInstance.current) {
      radarChartInstance.current = echarts.init(radarChartRef.current);
    }

    // 柱状图配置
    const barOption = {
      title: {
        text: '各分类互动数据对比',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['加入购物车', '点击', '收藏', '购买'],
        bottom: 10
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: mockData.map(item => item.category_name),
        axisLabel: {
          rotate: 45
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '加入购物车',
          type: 'bar',
          data: mockData.map(item => item.cart_cnt),
          itemStyle: { color: '#5470c6' }
        },
        {
          name: '点击',
          type: 'bar',
          data: mockData.map(item => item.click_cnt),
          itemStyle: { color: '#91cc75' }
        },
        {
          name: '收藏',
          type: 'bar',
          data: mockData.map(item => item.favorite_cnt),
          itemStyle: { color: '#fac858' }
        },
        {
          name: '购买',
          type: 'bar',
          data: mockData.map(item => item.purchase_cnt),
          itemStyle: { color: '#ee6666' }
        }
      ]
    };

    // 雷达图配置
    const radarOption = {
      title: {
        text: '分类互动行为雷达图',
        left: 'center'
      },
      tooltip: {},
      legend: {
        data: mockData.slice(0, 3).map(item => item.category_name),
        bottom: 10
      },
      radar: {
        indicator: [
          { name: '加入购物车', max: 4000 },
          { name: '点击', max: 15000 },
          { name: '收藏', max: 1500 },
          { name: '购买', max: 1500 }
        ]
      },
      series: [
        {
          type: 'radar',
          data: mockData.slice(0, 3).map((item, index) => ({
            value: [item.cart_cnt, item.click_cnt, item.favorite_cnt, item.purchase_cnt],
            name: item.category_name,
            areaStyle: { opacity: 0.2 }
          }))
        }
      ]
    };

    // 渲染图表
    if (barChartInstance.current) {
      barChartInstance.current.setOption(barOption);
    }
    if (radarChartInstance.current) {
      radarChartInstance.current.setOption(radarOption);
    }

    // 响应式调整
    const handleResize = () => {
      if (barChartInstance.current) {
        barChartInstance.current.resize();
      }
      if (radarChartInstance.current) {
        radarChartInstance.current.resize();
      }
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      if (barChartInstance.current) {
        barChartInstance.current.dispose();
        barChartInstance.current = null;
      }
      if (radarChartInstance.current) {
        radarChartInstance.current.dispose();
        radarChartInstance.current = null;
      }
    };
  }, []);

  return (
    <div>
      <Title level={4}>分类互动统计数据</Title>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Card>
            <div ref={barChartRef} style={{ width: '100%', height: 400 }} />
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card>
            <div ref={radarChartRef} style={{ width: '100%', height: 400 }} />
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card>
            <Title level={5}>分类互动统计信息</Title>
            <div style={{ marginBottom: 20 }}>
              <Text strong>互动量最高的分类: </Text>
              <Text>{mockData.reduce((max, item) => item.total_interactions > max.total_interactions ? item : max).category_name}</Text>
            </div>
            <div style={{ marginBottom: 20 }}>
              <Text strong>总互动次数: </Text>
              <Text>{mockData.reduce((sum, item) => sum + item.total_interactions, 0).toLocaleString()}</Text>
            </div>
            <div style={{ marginBottom: 20 }}>
              <Text strong>平均每个分类互动次数: </Text>
              <Text>{Math.round(mockData.reduce((sum, item) => sum + item.total_interactions, 0) / mockData.length).toLocaleString()}</Text>
            </div>
          </Card>
        </Col>
      </Row>
      <Card style={{ marginTop: 20 }}>
        <Title level={5}>详细数据列表</Title>
        <Table columns={columns} dataSource={mockData} rowKey="category_id" pagination={{ pageSize: 10 }} />
      </Card>
    </div>
  );
};

export default CategoryInteraction;